<template>
	<view class="cons_con">
		<view class="" style="width: 100%;height: 160rpx;margin-top: 20rpx;">
			<u-navbar title="苏体商业" :bgColor="navBgColor" :titleStyle="{ color: navColor }" :leftIconColor="'#000000'"
				fixed :autoBack="true">
			</u-navbar>
		</view>

		<view class="add_list">
			<image class="add_li_img"
				:src="syimg"
				mode="" @click="onPreview"></image>
		</view>

		<view class="data-list1">
			<view class="scroll" style="height: auto;">
				<view class="data-item flex-align" v-for="(item, index) in ticketproducts" :key="index"
					@click="ondatalist1(item, index)">
					<view class="image">
						<u--image :src="item.picture" width="240rpx" height="154rpx" radius="5"></u--image>
					</view>
					<view class="detail">
						<view>
							<view class="title ellipsis-1"><text style="font-size: 30rpx;color: #ffaa00"
									v-if="item.inventory == 0">预约</text><text>
									{{ item.name }}</text> </view>
							<!-- <view class="tag-list flex-align">
								<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
									:key="tagIndex">{{ tagItem.name }}</view>
							</view> -->
						</view>
						<!-- <view class="flex-between">
							<view class="price">￥{{ item.selling_price }}</view>
							<view style="height: 50rpx;width: 100rpx;background: linear-gradient( 135deg, #FFBD7E 0%, #EC923E 100%), #56BF89;
									border-radius: 15rpx;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;text-align: center;">
								购买
							</view>
						</view> -->
						<view class="flex-between">
							<view class="flex-align">
								<!-- <price :value="item.selling_price" :color="'#4BA677'"></price> -->
								<view class="price">￥{{ item.selling_price }}</view>
							</view>
							<view
								style="height: 50rpx;width: 100rpx;background: linear-gradient( 135deg, #FFBD7E 0%, #EC923E 100%), #56BF89;border-radius: 15rpx;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;text-align: center;">
								购 买
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="ticketnum.length > 3 && ticketpage == 1"
					style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
					@click="onticket">
					<image style="width: 23.83rpx;height: 20.41rpx;" :src="zx22" mode=""></image>
				</view>
				<view class="" v-if="ticketnum.length > 3 && ticketpage == 2"
					style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
					@click="offticket">
					<image style="width: 23.83rpx;height: 20.41rpx;transform: rotate(180deg);" :src="zx22" mode="">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#000000',
				ticketproducts: [],
				venueDetail: {},
				timeData: {},
				menuActive: '',
				products: [],
				id: 0,
				belong: 'court',
				time_list: '',
				each_num: {
					open_time_start: '',
					open_time_end: '',
				},
				windows: '',
				venueDetaillist: [],
				belonglist: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 1,
				},
				totalPage: '', //几页
				index_list: {},
				tabindex: 0,
				courtproducts: [],
				ticketproducts: [],
				cardproducts: [],
				cate_id: '',
				courtpage: 1,
				ticketpage: 1,
				cardpage: 1,
				courtnum: 0,
				ticketnum: 0,
				cardnum: 0,
				syimg:''
			};
		},
		onLoad(options) {
			this.id = options.id;
			// this.belong = options.belong;
			this.menuActive = options.menuActive;
			this.getVenueDetail(options.id);
			this.getimage()
		},
		methods: {
			// 获取商铺图片
			async getimage() {
				let postData = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				};
				let result = await venues.getBannerForDaiJinQuan(postData);
				if (result.code === 1) {
					this.syimg = result.data[0];
				}
			},
			// 获取场馆详情
			async getVenueDetail(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'top'
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.venueDetail = result.data;
					// this.navbarItems_1[1].text = this.venueDetail.venue_name;
					// uni.setNavigationBarTitle({
					// 	title: '订场购票办卡'
					// });
					this.windows = result.data.windows
					this.getDetaillist(this.id, 0)
				}
			},
			async getDetaillist(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'projects_has_coupon',
					belong: this.belong,
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.list1 = result.data.cates;
					this.cate_id = this.list1[0].id
					this.getcatelist()
				}
			},
			async getcatelist() {
				let that = this;
				that.courtproducts = []
				let postData = {
					shop_id: this.id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'ticket_and_court',
					belong: this.belong,
					cate_id: this.cate_id,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					if (that.courtpage == 1) {
						that.courtproducts = result.data.products.court.slice(0, 3)
						that.courtnum = result.data.products.court
					} else {
						that.courtproducts = result.data.products.court
					}
					if (that.ticketpage == 1) {
						that.ticketproducts = result.data.products.ticket.slice(0, 3)
						that.ticketnum = result.data.products.ticket
					} else {
						that.ticketproducts = result.data.products.ticket
					}
					if (that.cardpage == 1) {
						that.cardproducts = result.data.products.card.slice(0, 3)
						that.cardnum = result.data.products.card
					} else {
						that.cardproducts = result.data.products.card
					}
				}
			},
			ondatalist1(item, index) {
				console.log(item, index)
				uni.navigateTo({
					url: './ticketModule?id=' + item.id +
						"&venue_name=" +
						this.venueDetail.venue_name +
						'&venue_id=' +
						this.venueDetail.id
				})
			},
			onPreview() {
				uni.navigateTo({
					url: "/pages/venues/index?current_Tab=" + 2 + '&addsav=' + 1,
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.cons_con {
		.add_list {
			position: relative;
			width: 710rpx;
			height: 420rpx;
			margin: 0 auto;

			.add_li_img {
				width: 710rpx;
				height: 420rpx;
				margin: 0 auto;
			}
		}

		// 列表1
		.data-list1 {

			.scroll {
				height: 100%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}

			.data-item {
				// margin-top: 20rpx;
				// height: 210rpx;
				// width: 690rpx;
				// background-color: #ffffff;
				// padding: 10rpx;
				// border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				// border-radius: 6rpx;
				// box-shadow: 30px 2px 10px #f9f9f9;
				padding: 20rpx 0;
				width: calc(100% - 40rpx);
				height: 194.5rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);
				padding-bottom: 20rpx;
				// margin-bottom: 20rpx;
				// padding: 20rpx 20rpx;

				.image {
					// padding-left: 10rpx;
					width: 240rpx;
					height: 154rpx;
					border-radius: 5px;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0 10rpx 10rpx;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							// background-color: #abc6fa;
							margin-right: 10rpx;
							border: 1rpx solid #4BA677;
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.price {
						font-size: 32rpx;
						color: #4BA677;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>